<template>
  <div>
    <Drawer
      title="综 合 指 标"
      v-model="show"
      class="tubiao"
      width="422"
      :closable="false"
      :mask-closable="false"
    >
      <template v-slot:header>
        <div>
          <Button @click="ceBianLanClick" type="primary" icon="md-arrow-round-forward"
            >车间概况</Button
          >
        </div>
      </template>
      <div
        style="
          min-height: 760px;
          height: 100%;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
        "
      >
        <div style="width: 100%; height: 33.4%; flex-shrink: 0">
          <gun-dong-lan ref="gunDongLanRef"></gun-dong-lan>
        </div>
        <div style="height: 33.3%; flex-shrink: 0">
          <zu-xin-tu
            :content-heigth="contentHeigth"
            :content-width="contentWidth"
            ref="zonglanEchars"
            tu-xing-i-d="zonglanEchars3"
          ></zu-xin-tu>
        </div>
        <div style="height: 33.3%; flex-shrink: 0">
          <ping-zhong-tu
            ref="pingZhongTuRef"
            :content-heigth="contentHeigth"
            :content-width="contentWidth"
            tu-xing-i-d="pingZhongTuEchars"
          ></ping-zhong-tu>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script setup>
  import gunDongLan from '@/views/shengChanJianShi/zhuangTaiZongLan/components/tuBiao/gunDongLan.vue'
  // import tingCheBingTu from '@/views/shengChanJianShi/zhuangTaiZongLan/tuBiao/YzhouGongXuTu'
  import zuXinTu from '@/views/shengChanJianShi/zhuangTaiZongLan/components/tuBiao/zuXinTu.vue'
  import pingZhongTu from '@/views/shengChanJianShi/zhuangTaiZongLan/components/tuBiao/pingZhongTu.vue'
  import { defineProps, ref, watch } from 'vue'

  const props = defineProps({
    zanBiDict: Object
  })

  const show = ref(false)
  // const switch1 = ref(false)
  // const switch2 = ref(false)
  // const styles = ref({
  //   height: 'calc100% - 55px)',
  //   overflow: 'auto',
  //   paddingBottom: '53px',
  //   position: 'static'
  // })
  const contentHeigth = ref('')
  const contentWidth = ref('')
  const zongShu = ref()
  // const valueList = ref([])
  // const nameList = ref([])

  watch(
    props.zanBiDict,
    (newName) => {
      zongShu.value = newName.parking + newName.running + newName.fault + newName.offLine
      const valueList = []
      valueList.push(newName.parking)
      valueList.push(newName.running)
      valueList.push(newName.fault)
      valueList.push(newName.offLine)

      const parkingBai = ((newName.parking / zongShu.value) * 100).toFixed(2)
      const runningBai = ((newName.running / zongShu.value) * 100).toFixed(2)
      const faultBai = ((newName.fault / zongShu.value) * 100).toFixed(2)
      const offLineBai = (100 - parkingBai - runningBai - faultBai).toFixed(2)

      const nameList = []
      nameList.push('停机 ' + newName.parking + '台 ' + parkingBai + '%')
      nameList.push('运行 ' + newName.running + '台 ' + runningBai + '%')
      nameList.push('故障 ' + newName.fault + '台 ' + faultBai + '%')
      nameList.push('离线 ' + newName.offLine + '台 ' + offLineBai + '%')
      valueList.value = valueList
      nameList.value = nameList
    },
    { deep: true }
  )

  const zonglanEchars = ref()
  const pingZhongTuRef = ref()
  const gunDongLanRef = ref()
  // const ceBianLanShow = () => {
  //   show.value = !show.value
  //   nextTick(() => {
  //     let view = document.getElementsByClassName('ivu-drawer-body')
  //     let heigth =
  //       (view[0].clientHeight - 32) * 0.33 > 264 ? (view[0].clientHeight - 32) * 0.33 : 264
  //     contentHeigth.value = heigth + 'px'
  //     contentWidth.value = view[0].clientWidth - 32 + 'px'

  //     zonglanEchars.value.init(valueList, nameList)
  //     pingZhongTuRef.value.init()
  //     gunDongLanRef.value.ceBianLanShow()
  //   })
  // }
  // //品种切换图
  // pingZhongFenBuClick(){
  //   this.$emit('pingZhongFengBuClick',this.switch1);
  // },
  // // 进度条
  // jingDuTiaoBuClick(){
  //   //自定义菜单点击事件
  //   this.$emit('jingDuTiaoClick',this.switch2);
  // },
  const ceBianLanClick = () => {
    show.value = false
  }
</script>

<style lang="scss"></style>
